@{
    ViewData["Title"] = "装箱明细管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <style>
        .header-panel {
            padding: 15px;
            background: #f8f8f8;
            margin-bottom: 10px;
            border-bottom: 1px solid #e6e6e6;
        }
        .toolbar {
            padding: 10px 15px;
            background: #fff;
            margin-bottom: 10px;
        }
        .table-container {
            padding: 0 15px;
        }
        .packing-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .info-item {
            display: flex;
            align-items: center;
        }
        .info-label {
            font-weight: bold;
            margin-right: 8px;
            color: #666;
        }
        .info-value {
            color: #333;
        }
        .status-draft { color: #ff5722; font-weight: bold; }
        .status-completed { color: #5fb878; font-weight: bold; }
        .modal-form { padding: 20px; }
        .form-actions { 
            text-align: right; 
            padding-top: 20px; 
            border-top: 1px solid #e6e6e6; 
            margin-top: 20px; 
        }
    </style>
</head>
<body>
    <!-- 装箱信息面板 -->
    <div class="header-panel">
        <div class="packing-info" id="packingInfo">
            <div class="info-item">
                <span class="info-label">装箱编号:</span>
                <span class="info-value" id="packingCode">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">装箱日期:</span>
                <span class="info-value" id="packingDate">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">客户编码:</span>
                <span class="info-value" id="customerCode">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">状态:</span>
                <span class="info-value" id="packingStatus">-</span>
            </div>
        </div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
        <button type="button" class="layui-btn layui-btn-sm" id="btnAddDetail">
            <i class="layui-icon layui-icon-add-1"></i> 新增明细
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnRefresh">
            <i class="layui-icon layui-icon-refresh-3"></i> 刷新
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="btnBatchDelete">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
        <table class="layui-table" lay-filter="detailTable" id="detailTable"></table>
    </div>

    <!-- 新增明细弹窗 -->
    <div id="addDetailModal" style="display: none;">
        <div class="modal-form">
            <form class="layui-form" lay-filter="addDetailForm">
                <input type="hidden" name="packingId" id="addPackingId">
                <div class="layui-form-item">
                    <label class="layui-form-label">生产工单</label>
                    <div class="layui-input-block">
                        <div class="layui-input-group">
                            <input type="text" name="workOrderCode" placeholder="请选择生产工单" class="layui-input" readonly lay-verify="required">
                            <input type="hidden" name="workOrderId">
                            <div class="layui-input-split layui-input-suffix" style="cursor: pointer;" id="btnSelectWorkOrder">
                                <i class="layui-icon layui-icon-search"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物料编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="materialCode" placeholder="自动获取" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物料名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="materialName" placeholder="自动获取" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">计划数量</label>
                            <div class="layui-input-block">
                                <input type="number" name="plannedQuantity" placeholder="自动获取" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">实际数量</label>
                            <div class="layui-input-block">
                                <input type="number" name="actualQuantity" placeholder="请输入实际数量" class="layui-input" lay-verify="required|number" step="0.01">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单位</label>
                            <div class="layui-input-block">
                                <input type="text" name="unit" placeholder="自动获取" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="addDetailSubmit">确认新增</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="btnCancelAddDetail">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 编辑明细弹窗 -->
    <div id="editDetailModal" style="display: none;">
        <div class="modal-form">
            <form class="layui-form" lay-filter="editDetailForm">
                <input type="hidden" name="id">
                <input type="hidden" name="packingId">
                <div class="layui-form-item">
                    <label class="layui-form-label">生产工单</label>
                    <div class="layui-input-block">
                        <input type="text" name="workOrderCode" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物料编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="materialCode" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物料名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="materialName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">计划数量</label>
                            <div class="layui-input-block">
                                <input type="number" name="plannedQuantity" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">实际数量</label>
                            <div class="layui-input-block">
                                <input type="number" name="actualQuantity" class="layui-input" lay-verify="required|number" step="0.01">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单位</label>
                            <div class="layui-input-block">
                                <input type="text" name="unit" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="editDetailSubmit">确认修改</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="btnCancelEditDetail">取消</button>
                </div>
            </form>
        </div>
    </div>
    <script src="~/layui/layui.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }

            var packingId = getUrlParam('packingId');
            if (!packingId) {
                layer.msg('缺少装箱ID参数');
                return;
            }

            // 加载装箱信息
            function loadPackingInfo() {
                $.get('/Packing/Get/' + packingId, function(res) {
                    if(res.success || res.code === 0) {
                        var data = res.data || res;
                        $('#packingCode').text(data.packingCode || '-');
                        $('#packingDate').text(data.packingDate ? layui.util.toDateString(new Date(data.packingDate), 'yyyy-MM-dd') : '-');
                        $('#customerCode').text(data.customerCode || '-');
                        
                        var statusText = '';
                        if(data.state === '0') statusText = '<span class="status-draft">草稿</span>';
                        else if(data.state === '1') statusText = '<span class="status-completed">已完成</span>';
                        else statusText = '未知';
                        $('#packingStatus').html(statusText);
                    }
                });
            }

            // 表格渲染
            var tableIns = table.render({
                elem: '#detailTable',
                url: '/Packing/GetPackingDetails',
                method: 'POST',
                where: { packingId: packingId },
                page: true,
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                cols: [[
                    {type: 'checkbox', width: 60},
                    {field: 'workOrderCode', title: '工单编号', width: 150},
                    {field: 'materialCode', title: '物料编码', width: 120},
                    {field: 'materialName', title: '物料名称', width: 150},
                    {field: 'plannedQuantity', title: '计划数量', width: 100, templet: function(d) {
                        return (d.plannedQuantity || 0).toFixed(2);
                    }},
                    {field: 'actualQuantity', title: '实际数量', width: 100, templet: function(d) {
                        return (d.actualQuantity || 0).toFixed(2);
                    }},
                    {field: 'unit', title: '单位', width: 80},
                    {field: 'remark', title: '备注', minWidth: 120},
                    {title: '操作', width: 150, templet: function(d) {
                        var html = '<button class="layui-btn layui-btn-xs" onclick="editDetail('+d.id+')">修改</button>';
                        html += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteDetail('+d.id+')">删除</button>';
                        return html;
                    }}
                ]]
            });

            // 初始化
            loadPackingInfo();
            $('#addPackingId').val(packingId);

            // 刷新
            $('#btnRefresh').on('click', function() {
                tableIns.reload();
            });

            // 新增明细
            $('#btnAddDetail').on('click', function() {
                layer.open({
                    type: 1,
                    title: '新增明细',
                    content: $('#addDetailModal'),
                    area: ['800px', '600px'],
                    btn: false,
                    success: function() {
                        form.render();
                    }
                });
            });

            // 生产工单选择
            $('#btnSelectWorkOrder').on('click', function() {
                layer.open({
                    type: 2,
                    title: '选择生产工单',
                    content: '/Packing/SelectWorkOrder',
                    area: ['1200px', '700px'],
                    btn: ['确定', '取消'],
                    yes: function(index, layero) {
                        var workOrderData = layero.find('iframe')[0].contentWindow.getSelectedWorkOrder();
                        if (workOrderData) {
                            form.val('addDetailForm', {
                                workOrderCode: workOrderData.workOrderCode,
                                workOrderId: workOrderData.id,
                                materialCode: workOrderData.productCode,
                                materialName: workOrderData.productName,
                                plannedQuantity: workOrderData.quantity,
                                unit: workOrderData.unit
                            });
                            layer.msg('工单选择成功');
                        } else {
                            layer.msg('请选择一个生产工单');
                            return false;
                        }
                        layer.close(index);
                    }
                });
            });

            // 批量删除
            $('#btnBatchDelete').on('click', function() {
                var checkStatus = table.checkStatus('detailTable');
                var data = checkStatus.data;
                if(data.length === 0) {
                    layer.msg('请选择要删除的明细');
                    return;
                }
                
                layer.confirm('确定要删除选中的' + data.length + '条明细吗？', function(index) {
                    var ids = data.map(function(item) { return item.id; });
                    $.ajax({
                        url: '/Packing/BatchDeletePackingDetails',
                        type: 'POST',
                        data: { ids: ids },
                        success: function(res) {
                            if(res.success || res.code === 0) {
                                layer.msg('批量删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.message || '批量删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            // 取消按钮
            $('#btnCancelAddDetail, #btnCancelEditDetail').on('click', function() {
                layer.closeAll();
            });

            // 新增提交
            form.on('submit(addDetailSubmit)', function(data) {
                $.ajax({
                    url: '/Packing/CreatePackingDetail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res) {
                        if(res.success || res.code === 0) {
                            layer.msg('新增成功');
                            layer.closeAll();
                            tableIns.reload();
                        } else {
                            layer.msg(res.message || res.msg || '新增失败');
                        }
                    },
                    error: function() {
                        layer.msg('网络错误，请稍后重试');
                    }
                });
                return false;
            });

            // 编辑提交
            form.on('submit(editDetailSubmit)', function(data) {
                $.ajax({
                    url: '/Packing/UpdatePackingDetail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res) {
                        if(res.success || res.code === 0) {
                            layer.msg('修改成功');
                            layer.closeAll();
                            tableIns.reload();
                        } else {
                            layer.msg(res.message || res.msg || '修改失败');
                        }
                    },
                    error: function() {
                        layer.msg('网络错误，请稍后重试');
                    }
                });
                return false;
            });

            // 全局函数
            window.editDetail = function(id) {
                $.get('/Packing/GetPackingDetail/' + id, function(res) {
                    if(res.success || res.code === 0) {
                        var data = res.data || res;
                        layer.open({
                            type: 1,
                            title: '修改明细',
                            content: $('#editDetailModal'),
                            area: ['800px', '600px'],
                            btn: false,
                            success: function() {
                                form.val('editDetailForm', data);
                                form.render();
                            }
                        });
                    } else {
                        layer.msg('获取明细信息失败');
                    }
                }).fail(function() {
                    layer.msg('网络错误，请稍后重试');
                });
            };

            window.deleteDetail = function(id) {
                layer.confirm('确定要删除此明细吗？此操作不可恢复！', function(index) {
                    $.ajax({
                        url: '/Packing/DeletePackingDetail',
                        type: 'POST',
                        data: { id: id },
                        success: function(res) {
                            if(res.success || res.code === 0) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.message || '删除失败');
                            }
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试');
                        }
                    });
                    layer.close(index);
                });
            };
        });
    </script>
</body>
</html> 